<template>
	<div>
		<ma-body>
			<div slot="content" style="height: 100%;">
				<image src="@/static/img/isBack.png" mode="aspectFill" class="backImg" @tap="toBack"
					style="z-index: 999;"></image>

				<div class="top-info-box">
					<div class="left-box">
						<div class="header-box">
							<image :src="userDetail.info.avatar" mode="aspectFill" class="header-img" v-if="homeType == 'creator'" ></image>
							<image :src="user.myInfo.user.avatar" mode="aspectFill" class="header-img" v-else></image>
							<image src="@/static/img/mineBorder.png" mode="aspectFill" class="border-img"></image>
						</div>
						<div class="info-box">
							<span class="jiu-font32-fff">{{ userDetail.info.name }}</span>
							<span class="jiu-font24-555">ID：{{ userDetail.info.id }}</span>
							<div class="num-box">
								<div>
									<span class="jiu-font32-fff" style="margin-right: 4.27vw;"><label
											class="jiu-font24-555" style="margin-left: 2.13vw;">粉丝</label></span>
									<span class="jiu-font32-fff">320<label class="jiu-font24-555"
											style="margin-left: 2.13vw;">关注</label></span>
								</div>
							</div>
						</div>
					</div>

					<image src="@/static/img/close.png" mode="aspectFill" class="edit-img" v-if="homeType != 'creator'"></image>
					<span class="guan-btn jiu-font24-000" v-else @tap="onProductBrandFocus" :class="[isFocus == 0 ? 'is' : 'not']">{{ isFocus == 0 ? '关注' : '已关注' }}</span>
				</div>
				
				<div style="padding: 0 4.27vw;">
					<div class="museum-info-box">
						<div class="museum-left">
							<div class="left-top center">
								<image src="@/static/img/museumStart.png" mode="aspectFill" class="start-img"></image>
								<span class="jiu-font28-fff">藏馆名字</span>
							</div>
							<div class="jiu-font24-555" style="margin-top: 2.67vw;width: 34.13vw">藏馆简介藏馆简介藏馆简介藏馆简介…
							</div>
						</div>

						<div class="museum-right">
							<image src="@/static/img/museumBg.png" mode="heightFix" class="right-bg"></image>
							<span class="no-num">NO.123</span>
						</div>
					</div>
					
					<block v-if="homeType == 'creator'">
						<div class="title-box" style="position: sticky;z-index: 99;background: #000;" :style="{top: stickyHeight}">
							<span class="title" :class="{'active':index == selectIndex}" v-for="item,index in titleList"
								@tap="onSelect(index)">
								<image v-if="index == selectIndex" :src="item.select" mode="aspectFill"
									style="width: 6.4vw;height: 6.4vw;margin-right: 1.07vw;"></image>
								<image v-else :src="item.no" mode="aspectFill"
									style="width: 6.4vw;height: 6.4vw;margin-right: 1.07vw;"></image>
								{{ item.name }}
							</span> 
						</div>
					</block>

					<block v-if="homeType == 'my'">
						<span class="jiu-font32-555" style="margin-top: 8.53vw;display: block;">藏品列表</span>
						
						<div style="height: 100%;">
							<div class="list-box">
								<div class="item-box" v-for="item in 6">
									<image src="@/static/img/swiper.jpg" mode="aspectFill" class="item-img"></image>
									<div class="item-info">
										<span class="jiu-font32-fff item-title">Digital Artwork: Psycdsadsahedelic…</span>
										<div class="num-box">
											<div class="num">
												<image src="@/static/img/num.png" mode="aspectFill" class="num-img"></image>4812/8888
											</div>
											<image src="@/static/img/enter16.png" mode="aspectFill" class="enter-img"></image>
										</div>
									</div>
								</div>
							</div>
						</div>
					</block>
					
				</div>
				
				<block v-if="homeType == 'creator'">
					<swiper :current="selectIndex" @change="onChange" :style="{height: swiperHeight+ 'px'}">
						<swiper-item>
							<div id="works"> 
								<div style="padding: 0 4.27vw;position: relative;" v-if="page0.list.length != 0">
									<product-card v-for="item in page0.list" :item="item"></product-card>
								</div>
								<div class="img-box" v-else>
									<image src="@/static/img/noProduct.png" mode="aspectFill"
										style="width: 42.67vw;height: 42.67vw;background: transparent;"></image>
								</div>
							</div> 
						</swiper-item>
						<swiper-item>
							<div id="museum"> 
								<div class="list-box">
									<div class="item-box" v-for="item in 6">
										<image src="@/static/img/swiper.jpg" mode="aspectFill" class="item-img"></image>
										<div class="item-info">
											<span class="jiu-font32-fff item-title">Digital Artwork: Psycdsadsahedelic…</span>
											<div class="num-box">
												<div class="num">
													<image src="@/static/img/num.png" mode="aspectFill" class="num-img"></image>4812/8888
												</div>
												<image src="@/static/img/enter16.png" mode="aspectFill" class="enter-img"></image>
											</div>
										</div>
									</div>
								</div>
							</div> 
						</swiper-item>
					</swiper>
				</block>


			</div>
		</ma-body>
	</div>
</template>

<script>
	import productCard from '@/components/product-card/product-card';
	import Refresh from '@/$ma/common/js/refresh.js';
	export default{
		components: {
			productCard
		},
		data(){
			return{
				titleList: [{
						select: '/subPackB/static/img/worksSelect.png',
						no: '/subPackB/static/img/works.png',
						name: '作品'
					},
					{
						select: '/static/img/cangpinSelect.png',
						no: '/static/img/cangpinNo.png',
						name: '藏品'
					}
				],
				selectIndex: 0,
				stickyHeight: 0,
				swiperHeight: 200,
				swiperName: ['works', 'museum'],
				page0: new Refresh(this, {
					apiName: 'getCreatorProduction',
					id: 0
				}),
				homeType: '',
				isFocus: 0,
				creatorId: 0,
				userDetail: {}
			}
		},
		methods: {
			async getCollectionInfoAggrMy(){
				let res = await this.$u.api.getCollectionInfoAggrMy();
				this.userDetail = res;
				console.log(this.userDetail)
			},
			async onLoadmore() {
				await this[`page${this.selectIndex}`].onLoadmore();
			},
			async onSelect(index) {
				this.selectIndex = index;
				this.page[`${index}`].onRefresh()
				this.onGetSwiperHeight();
				uni.pageScrollTo({
					scrollTop: 10,
					duration: 10,
					success: () => {
						console.log(123)
					}
				})
			},
			async getRect(id) {
				return new Promise((resolve, reject) => {
					const query = uni.createSelectorQuery().in(this);
					query.select(id).boundingClientRect(data => {
						resolve(data);
					}).exec();
				});
			},
			async onGetSwiperHeight() {
				setTimeout(async () => {
					let type = this.swiperName[this.selectIndex];
					let res = await this.getRect(`#${type}`);
					if (!res) return;
					this.swiperHeight = res.height + 138;
				})
			},
			onChange(e) {
				this.selectIndex = e.detail.current;
				this.onGetSwiperHeight();
				uni.pageScrollTo({
					scrollTop: 10,
					duration: 10,
					success: () => {
						console.log(123)
					}
				})
			},
			async onProductBrandFocus(){
				let id = this.creatorId;
				this.$u.api.onProductBrandFocus({},id).then(res=>{
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					this.getProductBrandIsFocus()
				});
			},
			async getProductBrandIsFocus(){
				let id = this.creatorId;
				let res = await this.$u.api.getProductBrandIsFocus({},id);
				this.isFocus = res.data;
			},
			async getCreatorInfo(){
				let id = this.creatorId;
				let res = await this.$u.api.getCreatorInfo({},id);
				this.userDetail = res;
			}
		},
		async onLoad(e) {
			console.log(this.user)
			this.homeType = e.homeType;
			if(e.homeType == 'creator'){
				this.creatorId = e.id;
				this.page0.id = e.id;
				this.getCreatorInfo();
				await this.getProductBrandIsFocus(e.id);
				await this.page0.onRefresh();
				this.$nextTick(() => {
					this.onGetSwiperHeight();
					Promise.all([
						this.getRect('#swiper'),
					]).then(res => {
						this.stickyHeight = res[0].top;
					});
				})
			}else{
				this.getCollectionInfoAggrMy()
			}
		},
		onShow() {
			this.onGetSwiperHeight();
		},
		// 下拉刷新[]
		async onPullDownRefresh() {
			this[`page${this.selectIndex}`].list = []
			await this[`page${this.selectIndex}`].onRefresh().then(() => {
				this.onGetSwiperHeight();
			});
		
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 800); 
		},
		// 上拉加载
		async onReachBottom() {
			await this.onLoadmore();
			setTimeout(() => {
				this.onGetSwiperHeight();
			}, 0);
		},
	}
</script>

<style lang="scss">
	.img-box {
		height: 100%;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.title-box {
		margin-top: 4.27vw;
		padding: 2.13vw 0vw;
		display: flex;
	
		// justify-content: space-between;
		.title {
			padding: 0vw 5.33vw 0vw 4.27vw;
			line-height: 12.27vw;
			border-radius: 6.13vw;
			// background-color: #1b1b1b;
			color: #555555;
			font-size: 3.73vw;
			font-weight: 300;
			margin-right: 2.13vw;
			display: flex;
			align-items: center;
			border: 1px solid #1B1B1B;
		}
	
		.active {
			color: #FFFFFF;
			background-color: #1b1b1b;
		}
	}
	
	.center {
		display: flex;
		align-items: center;
	}

	.top-info-box {
		padding: 12.53vw 4.27vw;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left-box {
			display: flex;
			width: 100%;

			.header-box {
				position: relative;

				.header-img {
					width: 19.24vw;
					height: 20.8vw;
					z-index: 9;
					clip-path: polygon(50% 0, 97% 24%, 98% 76%, 50% 108%, 0 75%, 0 25%);
				}

				.border-img {
					width: 19.73vw;
					height: 21.33vw;
					position: absolute;
					left: -0.4vw;
					z-index: 9;
				}
			}

			.info-box {
				display: flex;
				flex-direction: column;
				margin-left: 4.53vw;

				.num-box {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
				}
			}
		}

		.edit-img {
			width: 6.4vw;
			height: 6.4vw;
		}
		
		.guan-btn{
			width: 17.07vw;
			display: flex;
			height: 8.53vw;
			align-items: center;
			justify-content: center;
			// line-height: 8.53vw;
			text-align: center;
			border-radius: 5.33vw;
		}
	}

	.museum-info-box {
		padding: 4.27vw;
		background: #1B1B1B;
		border-radius: 4.27vw;
		display: flex;
		justify-content: space-between;

		.museum-left {
			display: flex;
			flex-direction: column;

			.left-top {
				display: flex;

				.start-img {
					width: 4.27vw;
					height: 4.1vw;
					margin-right: 1.07vw;
				}
			}
		}

		.museum-right {
			position: relative;

			.right-bg {
				width: 37.33vw;
				height: 21.33vw;
			}

			.no-num {
				position: absolute;
				width: 21.33vw;
				top: 14.2vw;
				right: 8vw;
				font-size: 2.67vw;
				font-weight: 600;
				color: #000;
				text-align: center;
			}
		}
	}

	.list-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		.item-box {
			margin-top: 2.13vw;
			padding: 2.13vw;
			padding-bottom: 4.27vw;
			background-color: #1B1B1B;
			border-radius: 6.4vw;
			.item-img{
				width: 40.53vw;
				height: 40.53vw;
				border-radius: 5.33vw;
			}
			.item-info{
				display: flex;
				flex-direction: column;
				
				.item-title{
					width: 33.87vw;
					display: block;
					// width: 33.87vw;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
				}
				
				.num-box{
					display: flex;
					justify-content: space-between;
					margin-top: 4.27vw;
					.num{
						display: flex;
						border-radius: 1.07vw;
						background-color: #323232;
						line-height: 4.27vw;
						color: #FFCE80;
						font-size: 2.67vw;
						font-weight: 300;
						
						.num-img{
							width: 8.8vw;
							height: 4.27vw;
						}
					}
					.enter-img{
						width: 4.27vw;
						height: 4.27vw;
					}
				}
			}
		}
	}

	.is{
		background-color: #A972FF;
	}
	.not{
		background-color: #555555;
		box-shadow: none;
	}
</style>
